<!DOCTYPE html >
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link rel="stylesheet" th:href="@{/frontstatic/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/global.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/swiper.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/styles.css}">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <script charset="utf-8" th:src="@{/lib/layui-v2.6.3/layui.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script th:src="@{/js/template-web.js}"></script>
    <title>购物车</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="user-content__box clearfix bgf">
            <div class="title">购物车</div>
            <div class="shopcart-form__box">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th width="150">
                            <label class="checked-label"><i></i> 样图</label>
                        </th>
<!--                        <td width="40">编号</td>-->
                        <th width="260">商品信息</th>
                        <th width="150">单价</th>
                        <th width="200">数量</th>
                        <th width="80">操作</th>
                    </tr>
                    </thead>
                    <tbody id="shopingCarttbody">
                    </tbody>
                </table>
            </div>
            <div style="margin-left: 525px">
                <a id="shkingBtn" class="btnpulic">提交订单</a>
            </div>
        </div>

    </section>
</div>
</body>
<script id="shopcartTepmlate" type="text/template">
    {{each data values}}
    <tr  class="shopcartTr">
        <th scope="row" class="trliem">
            <label class="checked-label"><input type="checkbox" name="number"><i></i>
                <div class="img"><img src="{{values.exampleImage1}}" alt="{{values.c_name}}" class="cover"></div>
            </label>
        </th>
        <td style="display: none">
            <input value="{{values.shopingId}}" class="shoping"  style="display:none"></input>
        </td>
        <td style="display: none" >
            <input value="{{values.cid}}" class="commdity"  style="display:none"></input>
        </td>
        <td>
            <input value="{{values.spId}}" class="speces"  style="display:none"></input>
            <div class="name ep3">{{values.name}}</div>
            <div class="type c9">规格：{{values.csku}}</div>
        </td>
        <td>{{values.prices}}</td>
        <td>
            <div class="cart-num__box">
                <input type="button" class="sub" value="-">
                <input type="text" class="val" id="val" value="{{values.counts}}" maxlength="2">
                <input type="button" class="add" value="+">
            </div>
        </td>
        <td><a href="javascript:void(0)" onclick="del({{values.shopingId}})">删除</a></td>
    </tr>
    {{/each}}
</script>
<script>
    var notify;
    layui.use(['notify'],function(){
         notify=layui.notify;
    })
    function del(e){
        $.get("/deleteshopingID",{"id":e},function (ex) {
            if (ex.code===0) {
                window.location.reload();
            }else {
                layer.msg(ex.msg)
            }
        })
    }

    function getData() {
        var shopingData = [];
        var Targer = {}
        var counts = 0;
        var price = 0;
        $("#shkingBtn").click(function () {
            $("input[type='checkbox']").each(function () { //遍历checkbox的选择状态
                if ($(this).prop("checked")) { //如果值为checked表明选中了
                    Targer = {
                        shopingId: $(this).closest('tr').find('td').find('.shoping').val(),
                        spId:$(this).closest('tr').find('td').find('.speces').val(),
                        cid:$(this).closest('tr').find('td').find('.commdity').val(),
                        counts:$(this).closest('tr').find('td').find('.val').val()
                    }
                    shopingData.push(Targer);
                    price += parseInt($(this).closest('tr').find('td').eq(2).text());
                    counts += parseInt($(this).closest('tr').find('td').find('.val').val());
                }
            });
            if (shopingData.length > 0) {
                $.ajax({
                    type : "POST",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(shopingData),
                    dataType: "json",
                    url:"/statement",
                    async : true,
                    success : function(e){
                        if (e.code==0) {
                            window.location.href="/skippage?url=udai_shopcart_pay"
                        }else {
                            notify.error(e.msg)
                        }
                    }
                })
            }else {
                notify.warning("请选择")
            }
        });
    }
    getData()

    function getmembershopData() {
        $.get("/getmembershopData", function (result) {
            if (result.code==0) {
                date = {data: result.data}
                mera = template("shopcartTepmlate", date);
                $("#shopingCarttbody").append(mera);
                $(document).ready(function () {
                    var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
                        $check_all = $('.check-all');
                    // 全选
                    $check_all.on('change', function () {
                        $check_all.prop('checked', $(this).prop('checked'));
                        $item_checkboxs.prop('checked', $(this).prop('checked'));
                    });
                    $item_checkboxs.on('change', function () {
                        var flag = true;
                        $item_checkboxs.each(function () {
                            if (!$(this).prop('checked')) {
                                flag = false
                            }
                        });
                        $check_all.prop('checked', flag);

                    });
                    // 个数限制输入数字
                    $('input.val').onlyReg({reg: /[^0-9.]/g});
                    // 加减个数
                    $('.cart-num__box').on('click', '.sub,.add', function () {
                        var value = parseInt($(this).siblings('.val').val());
                        if ($(this).hasClass('add')) {
                            $(this).siblings('.val').val(Math.min((value += 1), 99));
                        } else {
                            $(this).siblings('.val').val(Math.max((value -= 1), 1));
                        }
                    });
                });
            }else {
                notify.error(result.msg)
            }
        })
    }

    getmembershopData();

</script>
</html>